<script setup lang="ts">
import { useToggle } from '@peng_kai/kit/libs/vueuse';
import { Views as GamesFairness } from '~/pages/help/Fairness/Fairness';
import { useFavorite, useGameInfoQuery } from '../helpers';
import { gameSharePopup } from './share/GameShare.vue';

const props = defineProps<{
  gameCode: string;
}>();

const gameCode = toRef(props, 'gameCode');
const { gameInfo } = useGameInfoQuery(gameCode);
const favorite = useFavorite(gameCode);

const GameFairness = computed(() => props.gameCode && GamesFairness[props.gameCode]);
const $content = ref<HTMLDivElement>();
const [expanding, toggleExpanding] = useToggle();

watch(expanding, (expanding) => {
  const $ctn = $content.value;

  if (!$ctn)
    return;

  if (expanding) {
    const currentHeight = $ctn.offsetHeight;
    $ctn.style.height = 'auto';
    void $ctn.offsetHeight;
    const nextHeight = $ctn.scrollHeight;
    $ctn.style.height = `${currentHeight}px`;
    void $ctn.offsetHeight;
    $ctn.style.height = `${nextHeight}px`;
  }
  else {
    $ctn.style.height = `${$ctn.scrollHeight}px`;
    void $ctn.offsetHeight;
    $ctn.style.height = '140px';
  }
});
</script>

<template>
  <div v-if="gameInfo">
    <div class="min-h-14 flex select-none items-center rounded-2 bg-sys-layer-d p-3">
      <div class="mr-auto flex flex-wrap items-baseline gap-1">
        <span class="mr-2 text-base font-600">{{ gameInfo.ename }}</span>
        <span class="text-sm text-sys-text-body"> By
          <span class="cursor-pointer hover:url-yellow-underline" @click="$router.push({ name: RN.GAMELISTPROVIDER, params: { providerCode: gameInfo.game_provider_detail?.provider_code, providerName: gameInfo.game_provider_detail?.name } })">{{ gameInfo.game_provider_detail?.name }}</span>
        </span>
      </div>

      <div class="mr-2 flex items-center text-6 text-sys-text-body *:ml-4 *:size-6 *:flex-center *:cursor-pointer *:transition-all">
        <div class="hover:(scale-110)" @click="favorite.toggle">
          <i v-if="favorite.is" class="i-ic:sharp-favorite text-red" />
          <i v-else class="i-ic:sharp-favorite-border" />
        </div>
        <div class="hover:(scale-110)" @click="gameSharePopup.open({ gameCode })">
          <i class="i-ic:baseline-share" />
        </div>
      </div>
      <template v-if="GameFairness">
        <div class="divider-v-gradual h-auto self-stretch" />
        <div
          class="w-9 flex-center cursor-pointer py-3 text-sys-text-body -my-3 tablet:w-12 hover:text-sys-text-head"
          @click="toggleExpanding()"
        >
          <i class="i-ion:chevron-down-outline transition-all" :class="{ 'rotate-180': expanding }" />
        </div>
      </template>
    </div>

    <div v-if="GameFairness" ref="$content" class="fairness-content" :class="{ expanding }">
      <component :is="GameFairness" />
    </div>
  </div>

  <gameSharePopup.PresetComponent />
</template>

<style lang="scss" scoped>
.fairness-content {
  --uno: 'text-sm text-sys-text-body p-3 h-140px overflow-hidden transition-all';
  mask-image: linear-gradient(#000, #0000);

  &.expanding {
    mask-image: none;
  }

  :deep(p) {
    --uno: 'my-2';
  }
}
</style>
